<!doctype html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap.min.css" >
    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/base.css">
    <title>入口</title>
  </head>
  <body>  
   <!-- 顶部导航 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
        <span class="navbar-text me-auto">
          欢迎光临,请 <a href="#">登录</a> 成为会员
        </span>

        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">我的</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 顶部导航 end-->
    <div class="container">
        <div class="row">
            <div class="col-lg-auto d-none d-lg-block mt-4">
                <a href="#">
                  <img src="./images/logo.png" alt="" />
                </a>
              </div>
        </div>
        <div class="row  justify-content-center">
            <div class="col-5">
                <div class="card  ">
                     
                    <div class="card-body">
                        <!-- 注册登录切换区域 -->
                        <nav>
                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                              <button class="nav-link active" id="pwd-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">密码登录</button>
                              <button class="nav-link" id="checkcode-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">验证码登录</button>
                              <button class="nav-link d-none " id="regist-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>

                            </div>
                          </nav>
                          <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                <form class="mt-4">
                                    <div class="mb-3">                                       
                                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
                                      <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
                                      <div id="pwdHelp" class="form-text"></div>
                                    </div> 
                                    <button type="submit" class="btn btn-primary w-100">登录</button>
                                  </form>
                                  <p class="text-center mt-2">
                                      <a class="form-text" href="javascript:void(0);" onclick="registFun()">立即注册</a> | <a class="form-text">忘记密码</a>
                                  </p>
                             </div>
                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                <form class="mt-4">
                                    <div class="mb-3">                                       
                                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="手机号码">
                                      <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="验证码">
                                      <div id="pwdHelp" class="form-text"></div>
                                    </div> 
                                    <button type="submit" class="btn btn-primary w-100">登录</button>
                                  </form>
                                  <p class="text-center mt-2">
                                    <a class="form-text" href="javascript:void(0);" onclick="registFun()">立即注册</a> | <a class="form-text">忘记密码</a>
                                </p>
                            </div>
                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                                <form class="mt-4">
                                    <div class="mb-3">                                       
                                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
                                      <div id="emailHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3">
                                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
                                      <div id="pwdHelp" class="form-text"></div>
                                    </div> 
                                    <div class="mb-3">
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="重复密码">
                                        <div id="pwdHelp" class="form-text"></div>
                                    </div>
                                    <div class="mb-3 text-center">
                                        <span class="form-text">登录即同意 用户协议、隐私政策</span>
                                    </div>
                                    <button type="submit" class="btn btn-danger w-100"> 同意并注册</button>
                                  </form>
                                   

                            </div>
                          </div>
                        <!-- 注册登录切换区域 end -->
                    </div>
                    <div class="card-footer text-muted text-center" style="letter-spacing: 10px;">
                       <i class="bi-skype"> </i> <i class="bi-twitter"></i> <i class="bi-github"></i> <i class="bi-google"></i>
                    </div>
                  </div>
            </div>
        </div>
    </div>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js" ></script>
    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->
    <script>
          let registBtn=document.getElementById("regist-tab");
          let pwdBtn=document.getElementById("pwd-tab");
          let checkCodeBtn=document.getElementById("checkcode-tab");
          let registFun=function(){
              registBtn.click();
              checkCodeBtn.style.display="none";
              pwdBtn.innerHTML="<";
          }

          pwdBtn.onclick=function(){
              this.innerHTML="密码注册";
              checkCodeBtn.style.display="block";
          } ;
    </script>
  </body>
</html>